<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="icon.css" rel="stylesheet">
	<link href="main.css" rel="stylesheet">
	<title>css</title>
	<style type="text/css">
		.nav-logo {
			float: left;
			height: 40px;
			margin-top: 5px;
			overflow: hidden;
		}

		.nav-logo a {
			margin: 0;
			padding: 0;
		}
	</style>
</head>

<body>
	<div class="top">
		<div>
			<div class="menu_computer">
				<div class="menus">
					<a href=""><img src="img/logo.png" alt=""></a>
					<a href="#" class="menu">首页</a>
					<a href="#" class="menu">Scratch</a>
					<a href="#" class="menu">python</a>
					<a href="#" class="menu">3D编程</a>
					<a href="#" class="menu">编程挑战</a>
					<a href="#" class="menu">makecode</a>
					<a href="#" class="menu">微课堂</a>
					<a href="#" class="menu">发现作品</a>
				</div>

				<div class="group_btn">
					<a href="">登陆</a> / <a href="">注册</a>
				</div>
			</div>
			<div class="top_mobile">
				<div class="glyphicon glyphicon-th-list" id="btn_menu_mobile"></div>
				<div class="group_btn">
					<a href="">登陆</a> / <a href="">注册</a>
				</div>
			</div>
			<div class="content_banner">
				<div class="banner">

				</div>
				<div class="login">

				</div>
			</div>
		</div>
	</div>


	<div class="content">
		<div>
			<div class="title_works title_a"></div>
			<div class="grid_works">
				<div>
					<a href="">
						<img src="https://xsm-workspace.oss-cn-beijing.aliyuncs.com/21707054011590894937529" alt="猜数字">
					</a>
					<a class="link" href="">猜数字</a>
					<p>
						<i class="icon iconfont icon-appreciate"></i>
						<span>0</span>
						<i class="icon iconfont icon-footprint"></i>
						<span>0</span>
					</p>
					<a class="link" href="">unity</a>
				</div>

				<div>
					<a href="">
						<img src="https://xsm-workspace.oss-cn-beijing.aliyuncs.com/21707054011590894937529" alt="猜数字">
					</a>
					<a class="link" href="">猜数字</a>
					<p>
						<i class="icon iconfont icon-appreciate"></i>
						<span>0</span>
						<i class="icon iconfont icon-footprint"></i>
						<span>0</span>
					</p>
					<a class="link" href="">unity</a>
				</div>

				<div>
					<a href="">
						<img src="https://xsm-workspace.oss-cn-beijing.aliyuncs.com/21707054011590894937529" alt="猜数字">
					</a>
					<a class="link" href="">猜数字</a>
					<p>
						<i class="icon iconfont icon-appreciate"></i>
						<span>0</span>
						<i class="icon iconfont icon-footprint"></i>
						<span>0</span>
					</p>
					<a class="link" href="">unity</a>
				</div>

				<div>
					<a href="">
						<img src="https://xsm-workspace.oss-cn-beijing.aliyuncs.com/21707054011590894937529" alt="猜数字">
					</a>
					<a class="link" href="">猜数字</a>
					<p>
						<i class="icon iconfont icon-appreciate"></i>
						<span>0</span>
						<i class="icon iconfont icon-footprint"></i>
						<span>0</span>
					</p>
					<a class="link" href="">unity</a>
				</div>

			</div>
			<div class="title_works title_b"></div>
			<div class="grid_works">

				<div>
					<a href="">
						<img src="https://xsm-workspace.oss-cn-beijing.aliyuncs.com/21707054011590894937529" alt="猜数字">
					</a>
					<a class="link" href="">猜数字</a>
					<p>
						<i class="icon iconfont icon-appreciate"></i>
						<span>0</span>
						<i class="icon iconfont icon-footprint"></i>
						<span>0</span>
					</p>
					<a class="link" href="">unity</a>
				</div>


				<div>
					<a href="">
						<img src="https://xsm-workspace.oss-cn-beijing.aliyuncs.com/21707054011590894937529" alt="猜数字">
					</a>
					<a class="link" href="">猜数字</a>
					<p>
						<i class="icon iconfont icon-appreciate"></i>
						<span>0</span>
						<i class="icon iconfont icon-footprint"></i>
						<span>0</span>
					</p>
					<a class="link" href="">unity</a>
				</div>


				<div>
					<a href="">
						<img src="https://xsm-workspace.oss-cn-beijing.aliyuncs.com/21707054011590894937529" alt="猜数字">
					</a>
					<a class="link" href="">猜数字</a>
					<p>
						<i class="icon iconfont icon-appreciate"></i>
						<span>0</span>
						<i class="icon iconfont icon-footprint"></i>
						<span>0</span>
					</p>
					<a class="link" href="">unity</a>
				</div>


				<div>
					<a href="">
						<img src="https://xsm-workspace.oss-cn-beijing.aliyuncs.com/21707054011590894937529" alt="猜数字">
					</a>
					<a class="link" href="">猜数字</a>
					<p>
						<i class="icon iconfont icon-appreciate"></i>
						<span>0</span>
						<i class="icon iconfont icon-footprint"></i>
						<span>0</span>
					</p>
					<a class="link" href="">unity</a>
				</div>


				<div>
					<a href="">
						<img src="https://xsm-workspace.oss-cn-beijing.aliyuncs.com/21707054011590894937529" alt="猜数字">
					</a>
					<a class="link" href="">猜数字</a>
					<p>
						<i class="icon iconfont icon-appreciate"></i>
						<span>0</span>
						<i class="icon iconfont icon-footprint"></i>
						<span>0</span>
					</p>
					<a class="link" href="">unity</a>
				</div>

			</div>
			<div class="title_works title_c"></div>
			<div class="grid_works">

				<div>
					<a href="">
						<img src="https://xsm-workspace.oss-cn-beijing.aliyuncs.com/21707054011590894937529" alt="猜数字">
					</a>
					<a class="link" href="">猜数字</a>
					<p>
						<i class="icon iconfont icon-appreciate"></i>
						<span>0</span>
						<i class="icon iconfont icon-footprint"></i>
						<span>0</span>
					</p>
					<a class="link" href="">unity</a>
				</div>


				<div>
					<a href="">
						<img src="https://xsm-workspace.oss-cn-beijing.aliyuncs.com/21707054011590894937529" alt="猜数字">
					</a>
					<a class="link" href="">猜数字</a>
					<p>
						<i class="icon iconfont icon-appreciate"></i>
						<span>0</span>
						<i class="icon iconfont icon-footprint"></i>
						<span>0</span>
					</p>
					<a class="link" href="">unity</a>
				</div>

				<div>
					<a href="">
						<img src="https://xsm-workspace.oss-cn-beijing.aliyuncs.com/21707054011590894937529" alt="猜数字">
					</a>
					<a class="link" href="">猜数字</a>
					<p>
						<i class="icon iconfont icon-appreciate"></i>
						<span>0</span>
						<i class="icon iconfont icon-footprint"></i>
						<span>0</span>
					</p>
					<a class="link" href="">unity</a>
				</div>

				<div>
					<a href="">
						<img src="https://xsm-workspace.oss-cn-beijing.aliyuncs.com/21707054011590894937529" alt="猜数字">
					</a>
					<a class="link" href="">猜数字</a>
					<p>
						<i class="icon iconfont icon-appreciate"></i>
						<span>0</span>
						<i class="icon iconfont icon-footprint"></i>
						<span>0</span>
					</p>
					<a class="link" href="">unity</a>
				</div>

				<div>
					<a href="">
						<img src="https://xsm-workspace.oss-cn-beijing.aliyuncs.com/21707054011590894937529" alt="猜数字">
					</a>
					<a class="link" href="">猜数字</a>
					<p>
						<i class="icon iconfont icon-appreciate"></i>
						<span>0</span>
						<i class="icon iconfont icon-footprint"></i>
						<span>0</span>
					</p>
					<a class="link" href="">unity</a>
				</div>

			</div>
		</div>
	</div>

	<div class="menu_mobile">
		<div>
			<a href="#" class="menu">首页</a>
			<a href="#" class="menu">Scratch</a>
			<a href="#" class="menu">python</a>
			<a href="#" class="menu">3D编程</a>
			<a href="#" class="menu">编程挑战</a>
			<a href="#" class="menu">makecode</a>
			<a href="#" class="menu">微课堂</a>
			<a href="#" class="menu">发现作品</a>
		</div>
	</div>

	<script src="jquery.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script>
		$("#btn_menu_mobile").click(function () {
			$(".menu_mobile").show();
		});

		$(".menu_mobile").click(function(){
			$(this).hide();
		})
	</script>
</body>


</html>